<template>
  <div>
    <el-form :inline="true"  class="demo-form-inline">
  <el-form-item label="员工工号">
    <el-input v-model="id" placeholder="输入员工工号"></el-input>
  </el-form-item>
  <el-form-item label="员工名字">
    <el-input v-model="name" placeholder="输入员工名字"></el-input>
  </el-form-item>
 


  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    <el-button type="primary" @click="selall">获取所有</el-button>
    <el-button type="primary" @click="showadd=true">新增员工</el-button>
  </el-form-item> 



   <el-table
    :data="adminData"
    border
    style="width: 860px">
    <el-table-column
      fixed
      prop="id"
      label="员工id"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name" 
      label="员工名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="img"
      label="员工头像"
      width="120">
      <template #default="scope">
                    <el-image  v-if="`${scope.row.img}`!=''" style="width:100px;height:100px;margin-bottom:-4px;"
                      :src="`http://114.132.214.60:8080/blog/cat?img=${scope.row.img}`">
                    </el-image>
                    <p v-else>
                      未设封面
                    </p>
                  </template>
    </el-table-column>
    <el-table-column
      prop="posts"
      label="职位描述"
      width="120">
    </el-table-column>
    <el-table-column
      prop="auth"
      label="权限类型"
      width="120">
    </el-table-column>

  
        <el-table-column
      prop="createtime"
      label="创建时间"
      width="120">
    </el-table-column>
  
  
    
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="toEditor(scope.row)">修改</el-button>
        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-form>

<el-pagination
@current-change="topages"
@next-click="next"
@prev-click="pre"
  background
  layout="prev, pager, next"
  :page-size="pageSize"
  :total="total">
</el-pagination>





<!-- 用于添加员工 -->
   <el-dialog title="添加员工" :visible.sync="showadd">
      <!-- form表单元素  -->
      <!-- model将表单数据收集到指定的对象身上，将来的表单验证也需要这个属性 -->
      <!-- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator -->
      <el-form   >
        <el-form-item label="用户名">
        <el-input type="text" v-model="imgdata.name" placeholder="输入员工工号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
        <el-input type="password" v-model="imgdata.password"></el-input>
        </el-form-item>
        <el-form-item label="职位描述">
        <el-input type="text" v-model="imgdata.posts"></el-input>
        </el-form-item>
        <el-form-item label="员工权限">
          <el-select
            v-model="imgdata.auth"
            placeholder="类型"
            @change="changeCondition1"
          >
            <el-option label="最高权限---0" value="0"></el-option>
            <el-option label="管理权限---1" value="1"></el-option>
            <el-option label="运营权限---2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工头像" prop="url">
          <!-- 收集数据这里不能使用v-model，因为不是表单元素
          action：设置图片上传的地址
          :on-success 可以检测到图片是否上传成功，上传成功会执行一次
          before-upload  图片上传之前执行一次
          -->
          <el-upload
            ref="upload"
            name="upload"
            :data="imgdata"
            class="avatar-uploader"
            action="http://114.132.214.60:8080/admin/add"
            :show-file-list="false"
            :auto-upload="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-progress="progre"
            :on-change="imgSaveToUrl"
            :on-error="err"
          >
            <img v-if="imgsrc" :src="imgsrc" class="avatar1" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <!-- 提示语 -->
            <div slot="tip" class="el-upload__tip">上传的文件不大于20mb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noshow">取 消</el-button>
        <el-button type="primary" @click="AddorUpdate">确 定</el-button>
      </div>
    </el-dialog>





    <!-- 用于修改员工 -->
   <el-dialog title="修改员工" :visible.sync="showadd1">
      <!-- form表单元素  -->
      <!-- model将表单数据收集到指定的对象身上，将来的表单验证也需要这个属性 -->
      <!-- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator -->
      <el-form   >
        <el-form-item label="用户名">
        <el-input type="text" v-model="imgdata.name" placeholder="输入员工工号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
        <el-input type="password" v-model="imgdata.password"></el-input>
        </el-form-item>
        <el-form-item label="职位描述">
        <el-input type="text" v-model="imgdata.posts"></el-input>
        </el-form-item>
        <el-form-item label="员工权限">
          <el-select
            v-model="imgdata.auth"
            placeholder="类型"
            @change="changeCondition1"
          >
            <el-option label="最高权限---0" value="0"></el-option>
            <el-option label="管理权限---1" value="1"></el-option>
            <el-option label="运营权限---2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更换新的员工头像" prop="url">
          <!-- 收集数据这里不能使用v-model，因为不是表单元素
          action：设置图片上传的地址
          :on-success 可以检测到图片是否上传成功，上传成功会执行一次
          before-upload  图片上传之前执行一次
          -->
          <el-upload
            ref="upload"
            name="upload"
            :data="imgdata"
            class="avatar-uploader"
            action="http://114.132.214.60:8080/admin/update"
            :show-file-list="false"
            :auto-upload="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-progress="progre"
            :on-change="imgSaveToUrl"
            :on-error="err"
          >
            <img v-if="imgsrc" :src="imgsrc" class="avatar1" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <!-- 提示语 -->
            <div slot="tip" class="el-upload__tip">上传的文件不大于20mb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noshow">取 消</el-button>
        <el-button type="primary" @click="AddorUpdate">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
     showadd1: false,
        imgsrc:"",
         imgdata:{
            id:"",
             token:"",
            name:"",
            password:"",
            posts:"",
            auth:"",
      },
      showadd: false,
      name: "",
      id: "",
      // 排序条件
      condition: "",
      // 排序类型
      sort: "",
      // 修改图片的名字
      upid: "",
      // 通过的验证字段
      isaudit: false,
      labelPosition: "left",
      formLabelAlign: {
        name: "",
        audit: "",
        type: "",
      },

      // 请求的页数
      page: 1,
      pageSize: 5,

      // 数据集合
      adminData: [],

      // 以下为分页器
      total: 89,

      // 显示提示框(查看的)
      dialogVisible: false,
      //  显示提示框（编辑的）
      dialogVisible1: false,
    };
  },
  mounted() {
    this.gteAdminList();
    this.imgdata.token=this.$store.state.user.token
  },
  methods: {
    // 选择权限
    changeCondition1(e){
        this.imgdata.auth=e
    },

    // 以下为添加员工的函数
    noshow(){
        this.showadd1=false

        this.showadd=false
         this.imgdata.name=""
    this.imgdata.password=""
    this.imgdata.posts=""
      this.imgdata.auth = "";
      this.imgsrc = "";
    },
    isadd(){
        this.showadd=true
    },
    imgSaveToUrl(event) {
      /*另外一种本地预览方法 */
      let URL = window.URL;
      window.webkitURL;
      this.imgsrc = URL.createObjectURL(event.raw);
    },
    progre(e) {
      console.log(e);
    },

    //下面为上传图片相关的回调
    handleAvatarSuccess(res, file) {
      //res是上传成功后返回给前端的数据
      //file也是上传成功后服务器返回给前端的数据

      //收集品牌数据，因为将来需要带给服务器

      this.$message({
        type: "success",
        message: "添加成功",
      });

      //重新获取
      this.imgdata.id=""
    this.imgdata.name=""
    this.imgdata.password=""
    this.imgdata.posts=""
      this.imgdata.auth = "";
      this.imgsrc = "";
      this.showadd=false;
      this.showadd1=false;

      this.gteAdminList()
    },
    beforeAvatarUpload(file) {
      console.log(file);
    },

    //添加合删除的集合
    AddorUpdate() {
      if (this.imgsrc == "") {
        return this.$message({
          message: "为放入图片",
          type: "warning",
        });
      }

      if (this.imgdata.auth == "") {
        return this.$message({
          message: "为选择图片的类型",
          type: "warning",
        });
      }

    
       if(this.imgdata.name==""){
        return this.$message({
          message: "未添加姓名",
          type: 'warning'
        });
      }

       if(this.imgdata.password==""){
        return this.$message({
          message: "未添加密码",
          type: 'warning'
        });
      }

      this.$refs.upload.submit();
    },
    // 上传失败的回调
    err() {
      this.$message({
        type: "error",
        message: "添加失败",
      });
    },

    async addAdmin() {
      await this.user;
    },
    // 删除用户
    del(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$API.user.delAdmin(e.id)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.gteAdminList();
            })
            .catch((e) => {
              this.$message({
                type: "error",
                message: e,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
 
    // // 确认修改
    // updateBlog() {
    //   if (this.formLabelAlign.type == 0 && this.formLabelAlign.audit == "") {
    //     return this.$message({
    //       message: "未填入未通过信息",
    //       type: "warning",
    //     });
    //   }
    //   this.$API.blog
    //     .updateBlog(
    //       this.upid,
    //       this.formLabelAlign.type,
    //       this.formLabelAlign.audit
    //     )
    //     .then((e) => {
    //       this.$message({
    //         message: e.msg,
    //         type: "success",
    //       });
    //     })
    //     .catch((e) => {
    //       this.$message.error(e.msg);
    //     });

    //   (this.upid = ""), (this.formLabelAlign.name = "");
    //   this.formLabelAlign.audit = "";
    //   this.formLabelAlign.type = "";
    //   this.dialogVisible1 = false;
    //   this.gteAdminList();
    // },
    // 取消修改
    noUpdate() {
      this.dialogVisible1 = false;
      (this.upid = ""), (this.formLabelAlign.name = "");
      this.formLabelAlign.audit = "";
      this.formLabelAlign.type = "";
    },
    // 修改选项
    changeSelect1(e) {
      console.log(e);
      console.log(e == 0);
      if (e == 0) {
        this.isaudit = true;
      }
    },
    // 编辑
    toEditor(e) {
        this.imgdata.id=e.id
       this.imgdata.name=e.name
    this.imgdata.password=e.password
    this.imgdata.posts=e.posts
      this.imgdata.auth = e.auth;
      this.showadd1=true
      
    },
    // // 获取所有文章数据
    selall() {
    this.id=""
    this.name=""
      this.gteAdminList();
    },
    // 切换页面
    topages(e) {
      this.page = e;
      this.gteAdminList();
    },
    //切换下一页
    next() {
      this.page++;
      this.gteAdminList();
    },
    // 切换上一页
    pre() {
      this.page--;
      this.gteAdminList();
    },
    // 页面初始化的数据
    async gteAdminList() {
      const result = await this.$API.user.getAdmin(
        this.name,
        this.id,
        this.page,
        this.pageSize
      );
      console.log(result);
      if (result.code == 200) {
        this.adminData = result.data.records;
        console.log(this.adminData);
        this.total=result.data.total
        // console.log(this.total);
      }
    },
    async onSubmit() {
      this.gteAdminList();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.el-pagination {
  margin-top: 50px;
}
.avatar1 {
  width: 178px;
  height: 178px;
  display: block;
}
</style>